import { useStore } from '../../store/index'
import { observer } from 'mobx-react-lite'
import { useEffect } from 'react'

function App() {
  const store = useStore()
  const { counterStore, listStore } = store

  useEffect(() => {
    listStore.setChannelList()
  }, [])
  const getData = () => {}
  return (
    <div>
      <section>MobxDemo</section>
      <div>
        <button
          onClick={() => {
            counterStore.addCount()
          }}
        >
          click me!
          {counterStore.count}
        </button>
        <div>原始数组：{JSON.stringify(listStore.filterList)}</div>
        <button onClick={() => listStore.pushList(counterStore.count)}>
          push list
        </button>
        <div>{JSON.stringify(listStore.channelList)}</div>
        <button onClick={getData}>get ajax data</button>
      </div>
    </div>
  )
}

export default observer(App)
